<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <!--<div class="action-cell">-->
        <!--<div class="search-block">-->
        <!--<Input v-model="value" class="input-search" placeholder="根据时间查询" style="width: 200px"></Input>-->
        <!--<Input v-model="value" class="input-search" placeholder="根据编队查找" style="width: 200px"></Input>-->
        <!--<Input v-model="value" class="input-search" placeholder="根据时间查找" style="width: 200px"></Input>-->
        <!--<Input v-model="value" class="input-search" placeholder="根据证件号查找" style="width: 200px"></Input>-->
        <!--<Button type="ghost" icon="ios-search">搜索</Button>-->
        <!--</div>-->
        <!--<Button type="error" @click="jumpPage('','UserAdd')">添加</Button>-->
        <!--</div>-->
        <!--<div class="action-cell">-->
        <!--<div class="list-action-btn">-->
        <!--<Button type="error" size="large" @click="oneAddClick()">新增一级菜单</Button>-->
        <!--</div>-->
        <!--</div>-->
        <!--<Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>-->
        <!--&lt;!&ndash;添加&ndash;&gt;-->
        <!--<Modal v-model="addIsShow" title="添加" @on-ok="handleSubmitAdd('formValidate')"-->
        <!--@on-cancel="addIsShow =false">-->
        <!--<Form ref="formValidate" :model="formValidate" :label-width="100">-->
        <!--<Form-item label="菜单名称" prop="Title">-->
        <!--<i-input v-model="formValidate.Title" placeholder="请输入菜单名称"></i-input>-->
        <!--</Form-item>-->
        <!--<Form-item label="图标" prop="ImgUrl">-->
        <!--<i-input v-model="formValidate.ImgUrl" placeholder="请输入图标"></i-input>-->
        <!--</Form-item>-->
        <!--<Form-item label="链接路径" prop="Url">-->
        <!--<i-input v-model="formValidate.Url" placeholder="请输入链接路径"></i-input>-->
        <!--</Form-item>-->
        <!--</Form>-->
        <!--</Modal>-->
        <!--&lt;!&ndash;编辑&ndash;&gt;-->
        <!--<Modal v-model="addIsShow2" title="编辑" @on-ok="handleSubmitEdit('formValidate2')"-->
        <!--@on-cancel="addIsShow2 =false">-->
        <!--<Form ref="formValidate2" :model="formValidate2" :label-width="100">-->
        <!--<Form-item label="菜单名称" prop="Title">-->
        <!--<i-input v-model="formValidate2.Title" placeholder="请输入菜单名称"></i-input>-->
        <!--</Form-item>-->
        <!--<Form-item label="图标" prop="ImgUrl">-->
        <!--<i-input v-model="formValidate2.ImgUrl" placeholder="请输入图标"></i-input>-->
        <!--</Form-item>-->
        <!--<Form-item label="链接路径" prop="Url">-->
        <!--<i-input v-model="formValidate2.Url" placeholder="请输入链接路径"></i-input>-->
        <!--</Form-item>-->
        <!--</Form>-->
        <!--</Modal>-->
        <!--<div style="margin: 10px;overflow: hidden">-->
        <!--<div style="float: right;">-->
        <!--<Page :total="total" size="large" show-total :current="current" show-elevator show-sizer-->
        <!--@on-change="changePage"></Page>-->
        <!--</div>-->
        <!--</div>-->
        <Button type="error" size="large" @click="jumpPage('','menuAdd')" style="margin-bottom: 20px">新增一级菜单
        </Button>
        <cTree :data="menuTreeData" :father="this"></cTree>
    </div>
</template>
<script>

    import apiUtil from '../../assets/utils/api_util';
    import cTree from '../../components/menuGroup';

    export default {
        data() {
            return {
                self: this,
                menuTreeData: [],
            }
        },
        mounted() {
            this.getMenuData();
        },
        components: {
            cTree
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            getMenuData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetMenu, para, function (res) {
                    that.$Loading.finish();

                    that.menuTreeData =res.Msg;

                });
            },
        },
        remove(row) {
            let that = this;
            this.$Modal.confirm({
                title: '删除',
                content: `是否删除该菜单`,
                onOk: function () {
                    this.$Loading.start();
                    let para = {
                        id: row.Id
                    };
                    let params = that.$qs.stringify(para);
                    apiUtil.post(that, apiUtil.urls.DelNavMenu, params, function (res) {
                        that.mockTableData();
                    });
                }
            })
        },
        changePage(row) {
            // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
            console.log("row", row);
            this.current = row;
            this.mockTableData();
        },
        //增加第一级菜单
        oneAddClick: function () {
            this.addNextId = '';
            this.addIsShow = true;
        },
        //点击添加
        addClick: function (row) {
            this.addNextId = row.Id;
            this.addIsShow = true;
        },
        //点击编辑
        editClick: function (row) {

            this.addIsShow2 = true;
            this.formValidate2.Title = row.Title;
            this.formValidate2.ImgUrl = row.ImgUrl;
            this.formValidate2.Url = row.Url;
            this.formValidate2.Id = row.Id;
            console.log("formValidate2:", this.formValidate2);
            console.log("row:", row)
            // this.formValidate2.Text =row.Intro;
        },
        handleSubmitAdd(name) {
            let that = this;
            let model = this.$refs[name].model;
            this.$refs[name].validate((valid) => {
                that.comfirmModifyPSAdd(model);
            })
        },
        comfirmModifyPSAdd: function (model) {
            let that = this;
            let params = {};
            console.log('model:', model);
            model.PrevId = this.addNextId;

            params = that.$qs.stringify(model);
            console.log('params:', params);
            apiUtil.post(that, apiUtil.urls.AddNavMenu, params, function (res) {
                that.$Message.info('添加成功 ');
                that.mockTableData();
            });
        },
        handleSubmitEdit(name) {
            let that = this;
            let model = this.$refs[name].model;
            this.$refs[name].validate((valid) => {
                that.comfirmModifyPSEdit(model);
            })
        },
        comfirmModifyPSEdit: function (model) {
            let that = this;
            let params = {};
            console.log('model:', model);


            params = that.$qs.stringify(params);
            console.log('params:', params);
            apiUtil.post(that, apiUtil.urls.EditNavMenu, params, function (res) {
                that.$Message.info('修改成功 ');
                that.mockTableData();
            });
        },
    }
</script>
